<template>
  <!-- 添加友链模块 -->
  <div class="addlink">
    <el-form ref="linkForm" :model="linkForm" :rules="rules" label-width="80px">
      <el-form-item label="友链名称" prop="name">
        <el-input v-model="linkForm.name"></el-input> 
      </el-form-item>

      <el-form-item label="首页地址" prop="home">
        <el-input v-model="linkForm.home"></el-input> 
      </el-form-item>

      <el-form-item label="图标地址" prop="logo">
        <el-input v-model="linkForm.logo"></el-input> 
      </el-form-item>

      <el-form-item label="友链描述" prop="describe">
        <el-input v-model="linkForm.describe"></el-input> 
      </el-form-item>

      <el-form-item>
        <el-button type="primary" size="small" @click="submitAdd">确认提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {mapMutations, mapState} from "vuex";
export default {
  name: "AddLink",
  data(){
    return{
      linkForm:{
        name:"",
        home:"",
        logo:"",
        describe:"",
      },
      rules:{
        name:[{required:true, message:"友链名称不能为空"}],
        home:[{required:true, message:"首页地址不能为空"}],
        logo:[{required:true, message:"图标地址不能为空"}],
        describe:[{required:true, message:"友链描述不能为空"}],
      }
    }
  },
  
  methods:{
    ...mapMutations(["noticeAddLink"]),
    // 确认提交按钮
    submitAdd(){
      this.$refs.linkForm.validate(async v=>{
        if(v){
         let {data} =  await this.$axios({
            method:"POST",
            url:"administer/link/addData",
            data:this.linkForm,
          });
          console.log(data);
          if(data.code) return this.$message.error(data.message);
          this.$message.success(data.message);
          this.$refs.linkForm.resetFields();
          this.noticeAddLink(); //修改vuex里面的数据
        }else{
          return false;
        };
      });
    },


  }
};
</script>

<style lang="less" scoped>
.addlink{
  // width: 600px;
  // overflow: hidden;
  padding-top: 10px;
  background-color: #fff;
}
/deep/ .el-form-item__label{
  text-align: left;
}
</style>